<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加员工页面</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"  >
</head>
<body>

<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">员工名称</label>
        <div class="layui-input-inline">
            <input type="text" name="staffName" required  lay-verify="required" placeholder="请输入员工名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">员工职位</label>
        <div class="layui-input-inline">
            <input type="text" name="staffLevel" required lay-verify="required" placeholder="请输入员工职位" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">员工性别</label>
        <div class="layui-input-block">
            <input type="radio" name="staffSex" value="男" title="男" checked>
            <input type="radio" name="staffSex" value="女" title="女">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择店铺</label>
        <div class="layui-input-inline">
            <select id="store-box" name="storeId" lay-verify="required">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">项目图片</label>
        <div class="layui-input-block">
            <!-- 上传图片预览 -->
            <img id="preView"  width="200" height="120px">
            <button type="button" class="layui-btn" id="upload_btn">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <input id="img_url" name="itemUrl" type="hidden">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addForm">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script th:src="@{/layui/layui.js}"></script>

<!--监听表单提交-->
<script>
    layui.form.on('submit(addForm)', function(data){
        //发送给后台，后台接受这些数据保存到数据库中
        var $ =  layui.jquery;
        $.ajax({
            method:'post',          /*请求方式 post（安全 数据量大）  get*/
            url:'/staff/add.do',     /*谁来接受数据，也就是后台地址*/
            data: JSON.stringify(data.field), /* 发个后台的数据 */
            dataType:'text',        /*希望后台给咱们的数据格式*/
            contentType:'application/json', /*声明发送给后台的数据格式*/
            success:function (rs){
                layui.layer.msg('添加成功');
            }
        })
        return false;
    });

    var $ =  layui.jquery;
    $.ajax({
        method:'get',
        url:'/store/list.do',
        dataType:'json',
        contentType:'application/json',
        success:function (rs){
            var $store = $("#store-box");
            for (var i=0; i<rs.length;i++){
                $store.append("<option value='"+rs[i].storeId+"'>"+rs[i].storeName+"</option>")
            }
            layui.form.render("select")
        }
    });

    var uploadInst = layui.upload.render({
        elem: '#upload_btn' //绑定元素
        ,url: '/upload/upload.do' //上传接口
        ,done: function(res){
            //上传完毕回调，把上传成功的图片地址给到 img标签的src
            $("#preView").attr('src',res.data);
            $("#img_url").val(res.data);
        }
        ,error: function(){
            //请求异常回调
        }
    });
</script>
</body>
</html>